<template>
  <div class="impact-detail-page">
    <BlockTitle title="基本信息"/>
    <div class="base-info-box">
      <div class="base-title">
        <img class="image" :src="require('@/views/impactSituation/assets/company.png')"/>
        <div class="name">{{ basicInfo.targetAssetSegment }}</div>
        <el-tag type="danger" size="small" effect="plain">{{basicInfo.targetAssetType}}</el-tag>
        <el-tag type="danger" size="small" effect="dark">0</el-tag>
      </div>
      <el-row :gutter="15">
        <el-col
            :span="item.span"
            v-for="(item, index) in basicInfoArray"
            :key="index"
        >
          <div class="base-content">
            <div class="key-box" :style="{ width: item.width }">
              {{ item.key }}
            </div>
            <div class="value-box" :title="item.value">
              <span>{{ item.value }}</span><span>{{item.unit}}</span>
            </div>
          </div>
        </el-col>
        <el-col v-if="basicInfo.tag.length">
          <div class="base-content">
            <div class="key-box" style="width: 120px;">
              受攻击手段
            </div>
            <div class="value-box-tag">
              <el-tag  size="small" effect="plain" v-for="tag in basicInfo.tag">{{ tag }}</el-tag>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <BlockTitle title="攻击图谱" border-style=""/>
    <AttackMap/>
    <BlockTitle title="攻击源分布"/>
    <AttackSourceMap/>
  </div>
</template>

<script>
import BlockTitle from '@/components/BlockTitle.vue'
import AttackMap from './components/AttackMap.vue'
import AttackSourceMap from './components/AttackSourceMap.vue'
import {numConvert} from "@/utils/pe_util.js";

export default {
  name: "ImpactSituationDetailPage",
  components: {
    AttackMap,
    BlockTitle,
    AttackSourceMap
  },
  data() {
    return {
      // 页面携带过来的参数 ---------
      propDateValue: [],
      targetAssetSegment: '', // 资产名称
      // ---------
      basicInfo: {},
      basicInfoArray: [],
    }
  },
  created() {
    this.initParams();
  },
  methods: {
    initParams() {
      const query = this.$route.query;
      this.propDateValue = [query.startTime, query.endTime];
      this.targetAssetSegment = query.targetAssetSegment;
      this.setBasicInfoData();
    },
    setBasicInfoData() {
      this.basicInfo = {
        "timeBetween": "0天20小时", //  持续周期
        "targetIpPortNum": 137, //  影响暴露面数量
        "num": 615, // 受攻击次数
        "targetAssetType": "服务器", // 资产类型
        "controlIpNum": 200, // 攻击ip数量
        "targetIpNum": 29,  // 影响ip数量
        "targetAssetSegment": "服务器", // 资产名称
        campaign: 'targetAssetSegment,targetIpNum,targetIpNum,targetIpNum,targetIpNum,targetIpNum', // 攻击组织
        "firstdate": "2024-07-17 18:00:12", // 开始时间
        "tag": ['扫描器','DNS/NTP 服务器','扫描器','DNS/NTP 服务器','扫描器','DNS/NTP 服务器','扫描器','DNS/NTP 服务器','扫描器','DNS/NTP 服务器','扫描器','DNS/NTP 服务器','扫描器','DNS/NTP 服务器','扫描器','DNS/NTP 服务器','扫描器','DNS/NTP 服务器','扫描器','DNS/NTP 服务器'], // 受攻击手段
        "targetAssetDept": "五楼西机房五楼西机房五楼西机房五楼西机房",  // 部门
        "lastdate": "2024-07-18 14:53:23" // 结束时间
      };
      this.basicInfoArray = [
        {
          width: "120px",
          key: "攻击次数",
          value: numConvert(this.basicInfo.num || 0),
          unit: "次",
          span: 4
        },
        {
          width: "120px",
          key: "攻击IP",
          value: numConvert(this.basicInfo.controlIpNum || 0),
          unit: "个",
          span: 5,
        },
        {
          width: "120px",
          key: "资产类型",
          value: this.basicInfo.targetAssetType,
          unit: "",
          span: 5,
        },
        {
          width: "120px",
          key: "部门",
          value: this.basicInfo.targetAssetDept,
          unit: "",
          span: 5,
        },
        {
          width: "120px",
          key: "影响IP",
          value: numConvert(this.basicInfo.targetIpNum || 0),
          unit: "个",
          span: 5,
        },
        {
          width: "120px",
          key: "影响暴露面",
          value: numConvert(this.basicInfo.targetIpPortNum || 0),
          unit: "个",
          span: 4,
        },
        {
          width: "120px",
          key: "攻击组织",
          value: this.basicInfo.campaign,
          unit: "",
          span: 5,
        },
        {
          width: "120px",
          key: "持续周期",
          value: this.basicInfo.timeBetween,
          unit: "",
          span: 5,
        },
        {
          width: "120px",
          key: "首次检出",
          value: this.basicInfo.firstdate,
          unit: "",
          span: 5,
        },
        {
          width: "120px",
          key: "最新检出",
          value: this.basicInfo.lastdate,
          unit: "",
          span: 5,
        },
      ]
    }
  },
}
</script>

<style lang="scss">
.impact-detail-page {
  .base-info-box {
    .base-title {
      display: flex;
      align-items: center;
      padding: 10px 0;

      .image {
        width: 20px;
      }

      .name {
        font-size: 16px;
        margin: 0 10px;
      }

      .el-tag {
        margin-right: 10px;
      }
    }
    .base-content{
      display: flex;
      line-height: 40px;
      .key-box {
        font-weight: 400;
        font-size: 15px;
        color: #808191;
      }
      .value-box {
        flex: 1;
        font-weight: 400;
        font-size: 15px;
        color: #3f405d;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .value-box-tag{
        .el-tag{
          margin-right: 10px;
        }
      }
    }
  }
}
</style>